<template>
  <div class="Class">
    <van-nav-bar title="派送至:北京石景山" left-text="">
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>
    <div class="flex">
      <div class="left">
        <!-- 侧边栏 -->
        <van-sidebar v-model="active">
          <van-sidebar-item
            style="line-height: 6px;"
            v-for="val in list"
            :key="val"
            :title="val"
          />
        </van-sidebar>
      </div>
      <!-- 内容显示 -->
      <div class="cont">
        <!-- 导航 -->
        <van-sidebar v-model="active2" style="display: flex; width: 100%;">
          <van-sidebar-item
            style="width: 33.33%; line-height: 6px;"
            v-for="val in list2"
            :key="val"
            :title="val"
          />
        </van-sidebar>
        <!-- 商品内容 -->
        <van-card
          style="margin-top: 0px;"
          v-for="(item, index) in list3[active]"
          :key="index"
          :num="item.cont"
          :price="item.price"
          :desc="item.desc"
          :thumb="item.thumb"
        >
          <template #tags>
            <van-tag @click="addcont(item)" plain type="danger">+</van-tag>
            <van-tag @click="setcont(item)" plain type="danger">-</van-tag>
          </template>
        </van-card>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      list: [
        '热销新品',
        '优选水果',
        '卤味熟食',
        '牛奶面包',
        '热饮',
        '冰淇凌',
        '饮料酒水',
        '休闲食品',
        '方便速食',
        '数码家电',
        '环球美食',
        '运动户外',
      ],
      list2: ['综合排序', '按价格', '分类'],
      active2: 0,
      list3: [
        [
          {
            desc: '新鲜青柠500g/盒新鲜特价新鲜特价新鲜特价',
            price: '10.8',
            cont: 1,
            thumb: require('./img/index1.png'),
          },
          {
            desc: '新鲜青柠500g/盒新鲜特价新鲜特价新鲜特价',
            price: '10.8',
            cont: 1,
            thumb: require('./img/index2.png'),
          },
          {
            desc: '新鲜青柠500g/盒新鲜特价新鲜特价新鲜特价',
            price: '10.8',
            cont: 1,
            thumb: require('./img/index3.png'),
          },
          {
            desc: '新鲜青柠500g/盒新鲜特价新鲜特价新鲜特价',
            price: '10.8',
            cont: 1,
            thumb: require('./img/index3.png'),
          },
          {
            desc: '新鲜青柠500g/盒新鲜特价新鲜特价新鲜特价',
            price: '10.8',
            cont: 1,
            thumb: require('./img/index3.png'),
          },
          {
            desc: '新鲜青柠500g/盒新鲜特价新鲜特价新鲜特价',
            price: '10.8',
            cont: 1,
            thumb: require('./img/index3.png'),
          },
          {
            desc: '新鲜青柠500g/盒新鲜特价新鲜特价新鲜特价',
            price: '10.8',
            cont: 1,
            thumb: require('./img/index3.png'),
          },
        ],
        [
          {
            desc: '新鲜青柠500g/盒新鲜特价新鲜特价新鲜特价1',
            price: '10.8',
            cont: 1,
            thumb: require('./img/index2.png'),
          },
        ],
        [
          {
            desc: '新鲜青柠500g/盒新鲜特价新鲜特价新鲜特价3',
            price: '10.8',
            cont: 1,
            thumb: require('./img/index3.png'),
          },
        ],
        [
          {
            desc: '新鲜青柠500g/盒新鲜特价新鲜特价新鲜特价4',
            price: '10.8',
            cont: 1,
            thumb: require('./img/index1.png'),
          },
        ],
        [
          {
            desc: '新鲜青柠500g/盒新鲜特价新鲜特价新鲜特价4',
            price: '10.8',
            cont: 1,
            thumb: require('./img/index2.png'),
          },
        ],
        [
          {
            desc: '新鲜青柠500g/盒新鲜特价新鲜特价新鲜特价4',
            price: '10.8',
            cont: 1,
            thumb: require('./img/index3.png'),
          },
        ],
        [
          {
            desc: '新鲜青柠500g/盒新鲜特价新鲜特价新鲜特价4',
            price: '10.8',
            cont: 1,
            thumb: require('./img/index1.png'),
          },
        ],
        [
          {
            desc: '新鲜青柠500g/盒新鲜特价新鲜特价新鲜特价4',
            price: '10.8',
            cont: 1,
            thumb: require('./img/index2.png'),
          },
        ],
        [
          {
            desc: '新鲜青柠500g/盒新鲜特价新鲜特价新鲜特价4',
            price: '10.8',
            cont: 1,
            thumb: require('./img/index3.png'),
          },
        ],
        [
          {
            desc: '新鲜青柠500g/盒新鲜特价新鲜特价新鲜特价4',
            price: '10.8',
            cont: 1,
            thumb: require('./img/index1.png'),
          },
        ],
        [
          {
            desc: '新鲜青柠500g/盒新鲜特价新鲜特价新鲜特价4',
            price: '10.8',
            cont: 1,
            thumb: require('./img/index2.png'),
          },
        ],
        [
          {
            desc: '新鲜青柠500g/盒新鲜特价新鲜特价新鲜特价4',
            price: '10.8',
            cont: 1,
            thumb: require('./img/index3.png'),
          },
        ],
      ],
    }
  },
  setup() {
    const active = ref(0)
    return { active }
  },
  setup() {
    const active2 = ref(0)
    return { active2 }
  },
  methods: {
    addcont(item) {
      item.cont++
      console.log(item)
    },
    setcont(item) {
      item.cont--
      if (item.cont <= 0) {
        item.cont = 0
      }
    },
  },
}
</script>

<style>
.van-nav-bar__left,
.van-nav-bar__right {
  justify-content: center !important;
}
.flex {
  display: flex;
}
.left {
  width: 21%;
}
.cont {
  width: 78%;
}
</style>
